<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	ArrayList<String> jsPaths = (ArrayList<String>) request
			.getAttribute("jsPaths");
	jsPaths.add("/resources/bootstrap/table/jquery.dataTables.min.js");
	jsPaths.add("/resources/bootstrap/table/dataTables.bootstrap.js");
	jsPaths.add("/resources/custom/project/project.js");
	jsPaths.add("/resources/bootstrap/select/bootstrap-select.js");
%>
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/table/dataTables.bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/select/bootstrap-select.css"
	rel="stylesheet">
<div class="row">
	<h2 class="sub-header">Project List</h2>
	<div class="row">
		<div class="col-sm-4">
			<label for="searchName" class="col-sm-4 control-label">Name:</label>
			<div class="col-sm-8">
				<input name="searchName" id="searchName" placeholder="Name"
					class="typeahead">
			</div>
		</div>
		<div class="col-sm-4">
			<label for="searchDescription" class="col-sm-4 control-label">Description:</label>
			<div class="col-sm-8">
				<input name="searchDescription" id="searchDescription"
					placeholder="Description" class="typeahead">
			</div>
		</div>
		<div class="col-sm-4">
			<label for="searchType" class="col-sm-4 control-label">Type:</label>
			<div class="col-sm-8">
				<input name="searchType" id="searchType" placeholder="Type"
					class="typeahead">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-4">
			<label for="searchProvince" class="col-sm-4 control-label">Province:</label>
			<div class="col-sm-8">
				<input name="searchProvince" id="searchProvince"
					placeholder="Province" class="typeahead">
			</div>
		</div>
		<div class="col-sm-4">
			<label for="searchCity" class="col-sm-4 control-label">City:</label>
			<div class="col-sm-8">
				<input name="searchCity" id="searchCity" placeholder="City">
			</div>
		</div>
		<div class="col-sm-4">
			<label for="searchDistrict" class="col-sm-4 control-label">District:</label>
			<div class="col-sm-8">
				<input name="searchDistrict" id="searchDistrict"
					placeholder="District">
			</div>
		</div>
	</div>
	<button class="btn btn-success btn-sm" data-toggle="modal"
		data-target="#myModal" id="addProject">Add Project</button>
</div>
<div class="table-responsive">
	<table id="project" class="table table-striped table-bordered display"
		cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>Name</th>
				<th>Description</th>
				<th>Type</th>
				<th>Province</th>
				<th>City</th>
				<th>District</th>
				<th>options</th>
			</tr>
		</thead>
	</table>
</div>

<!-- add project dialog -->
<div class="modal fade" id="createProjectModal" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Project</h4>
			</div>

			<form id="addForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/project/create"
				method="post">
				<div class="modal-body" id="selectList">
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="name" name="name"
								placeholder="Name">
						</div>
					</div>
					<div class="form-group">
						<label for="description" class="col-sm-3 control-label">Description</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="description"
								name="description" placeholder="Description">
						</div>
					</div>
					<div class="form-group">
						<label for="type" class="col-sm-3 control-label">Type</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="type" name="type"
								placeholder="Type">
						</div>
					</div>
					<div class="form-group">
						<label for="Province" class="col-sm-3 control-label">Province</label>
						<div class="col-sm-9">
							<select class="selectpicker form-control" id="province"
								name="province" data-live-search="true">

							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="city" class="col-sm-3 control-label">City</label>
						<div class="col-sm-9">
							<select class="selectpicker form-control" id="city" name="city"
								data-live-search="true"></select>
						</div>
					</div>
					<div class="form-group">
						<label for="district" class="col-sm-3 control-label">District</label>
						<div class="col-sm-9">
							<select class="selectpicker form-control" id="district"
								data-live-search="true" name="district"></select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary" id="create">Create
						Project</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- edit user dialog -->
<div class="modal fade" id="editProjectModal" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Project</h4>
			</div>

			<form id="editForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/project/update"
				method="post">
				<div class="modal-body">
					<input type="hidden" id="idEdit" name="id">
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">Name</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="nameEdit" name="name"
								placeholder="Name">
						</div>
					</div>
					<div class="form-group">
						<label for="description" class="col-sm-3 control-label">Description</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="descriptionEdit"
								name="description" placeholder="Description">
						</div>
					</div>
					<div class="form-group">
						<label for="type" class="col-sm-3 control-label">Type</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="typeEdit" name="type"
								placeholder="Type">
						</div>
					</div>
					<div class="form-group">
						<label for="Province" class="col-sm-3 control-label ">Province</label>
						<div class="col-sm-9">
							<select class="selectpicker form-control" id="provinceEdit"
								name="province" data-live-search="true"></select>
						</div>
					</div>
					<div class="form-group">
						<label for="city" class="col-sm-3 control-label">City</label>
						<div class="col-sm-9">
							<select class="selectpicker form-control" id="cityEdit"
								name="city" data-live-search="true"></select>
						</div>
					</div>
					<div class="form-group">
						<label for="district" class="col-sm-3 control-label">District</label>
						<div class="col-sm-9">
							<select class="selectpicker form-control" id="districtEdit"
								name="district" data-live-search="true">
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save Project</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- delete user dialog -->
<div class="modal fade" id="deleteProjectModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">Location Delete</h4>
			</div>
			<div class="modal-body">
				<p>This action will delete location information without
					recovery, are you sure to do this?</p>
			</div>
			<form class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/project/delete"
				method="post">
				<input type="hidden" class="form-control" id="idDelete" name="id">

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Delete</button>
				</div>
			</form>
		</div>
	</div>
</div>